<template>
	<view class="store-item">
		<view class="card" @click="goStoreDetail">
			<view class="top-row">
				<view class="authorization">
					<text>特许授权</text>
				</view>
				<text class="title">{{data.ShopName}}</text>
				<view class="tip">
					<image class="tip-ic" src="../../static/ic_bao.png">
						
					</image>
					<text class="tip-text">星梦保</text>
				</view>
				<view class="tip like" @click.stop="collect">
					<image class="tip-ic like" src="../../static/ic_like.png" mode="widthFix">
						
					</image>
					<text class="tip-text like">{{ isCollect ? '已收藏' :'收藏' }}</text>
				</view>
			</view>
			
			<view class="content-row">
				<image class="icon"></image>
				<view style="display: flex;flex-direction: column; margin-left: 25rpx; flex: 1;">
					<view class="button">
						<text>星梦保</text>
					</view>
					
					<view class="address">
						<image class="ic_location" src="../../static/ic_location.png" mode="widthFix"></image>
						<text style="word-break: break-all;">{{data.CorpAddress}}</text>
					</view>
				</view>
				
				<view style="display: flex;flex-direction: column; margin-left: 10rpx; align-items: flex-end; padding-right: 25rpx; justify-content: center; padding-top: 45rpx;">
					<text class="distance">{{data.distance}}KM</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		props: {
			data: Object,
			index: Number,
		},
		methods: {
			goStoreDetail() {
				uni.navigateTo({
					url: '/pages/search/storeDetail?index=' + this.index,
				})
			},
			collect() {
				let TypeCode = this.data.ShopCode;
				console.log('collect item', this.data)
				if (this.isCollect) {
					this.$store.dispatch('delMyCollect', { CollectType: '门店', TypeCode})
				} else {
					this.$store.dispatch('addMyCollect', { CollectType: '门店', TypeCode})
				}
			}
		},
		computed: {
			...mapState(['myShopCollect']),
			isCollect() {
				// console.log('myShopCollect',this.myShopCollect)
				return this.myShopCollect.find(item => item.ShopCode == this.data.ShopCode) != null
			},
		},
	}
</script>

<style>
	.store-item {
		padding: 15rpx 15rpx;
		font-family: "yshst" !important;
	}
	.store-item .card {
		background-color: white;
		border-radius: 15rpx;
		padding: 10rpx;
	}
	.top-row {
		display: flex;
		align-items: center;
		flex-direction: row;	
	}
	.authorization {
		font-size: 22rpx;
		background-color: #50c0f9;
		height: 40rpx;
		width: 130rpx;
		padding: 0 15rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx 20rpx 0 0;
		margin-right: 25rpx;
	}
	.title {
		font-size: 35rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
	}
	.tip {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	.tip.like {
		margin-left: 15rpx;
		padding: 10rpx 10rpx;
	}
	.tip-ic {
		width: 30rpx;
		height: 30rpx;
		margin-right: 4rpx;
	}
	.tip-ic.like {
		width: 28rpx;
		height: 28rpx;
	}
	.tip-text.like {
		color: #898989;
	}
	.content-row {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
	}
	.icon {
		width: 130rpx;
		height: 130rpx;
		min-width: 130rpx;
		border-radius: 15rpx;
		background-color: #e5f2f9;
	}
	.button {
		height: 50rpx;
		width: 120rpx;
		background-color: #50c0f9;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.address {
		display: flex;
		/* align-items: center; */
		color: #50c0f9;
		margin-top: 15rpx;
	}
	.address .ic_location {
		width: 30rpx;
		min-width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		margin-top: 5rpx;
	}
	.distance {
		color: #50c0f9;
	}
</style>